<template>
  <div>
    <div class="dingbu">
      <router-link to="/shezhi"><img src="/img/sz.png" alt="" /></router-link>
      <router-link to="/message"><img src="/img/xx.png" alt="" /></router-link>
    </div>
    <div class="erceng">
      <div><img src="/company/tou.webp" alt="" /></div>
      <div>
        <h4>小熊</h4>
        <span>个人简介</span>
      </div>
    </div>
    <div class="sanceng">
        <div>
        <router-link  to="/gerenjs">
            <h4>发布内容</h4>
            <span>0</span>
        </router-link>
        </div>
        <router-link to="/fensi">
            <h4>粉丝</h4>
            <span>0</span>
        </router-link>
        <div>
            <h4><router-link to="/guanzhu">关注</router-link></h4>
            <span>1</span>
        </div>
       
    </div>
    <div class="siceng">
        <div>
          <h4>我的收藏</h4>
          <p>我的点赞</p>
        </div>
        <div>
          <router-link to="/wodsouc">
          <van-cell is-link value="全部" url="" />
          </router-link>
        </div>
    </div>
    <div class="wuceng">
      <img src="@/assets/TJ/1.jpg" alt="">
      <img src="@/assets/TJ/2.jpg" alt="">
      <img src="@/assets/TJ/3.jpg" alt="">
      <img src="@/assets/TJ/4.jpg" alt="">
      <img src="@/assets/TJ/1.jpg" alt="">
      <img src="@/assets/TJ/2.jpg" alt="">
    </div>
    <van-overlay :show="showt" @click="showt = false">
    <div class="wrapper">
      <router-link to="/login">
      <button>请先登录</button>
      </router-link>
    </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showt: false,
    }
  },
  mounted(){
    // this.show = this.$route.query.ps
    // if(this.$route.query.arr=123){
    //   this.showt = false
    //   console.log(this.showt);
    // }else{
    //   this.showt = true
    // }
  }
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  color: #000;
}

.dingbu {
  display: flex;
  flex-direction: row-reverse;
  padding-right: 10px;
  padding-top: 10px;
}
.erceng {
  display: flex;
  height: 55px;
  width: 240px;
  white-space: nowrap;
  overflow: hidden;
  // text-overflow: ellipsis;
  margin-bottom: 20px;
  padding-left: 10px;
}
.erceng img {
  width: 50px;
  margin-right: 10px;
  border-radius: 50%;
  // border: 1px solid gray;
  box-shadow: 2px 3px 5px #aaa ;
}
.erceng h4 {
  margin-bottom: 10px;
}
.sanceng{
  display: flex;
  justify-content: space-evenly;
  text-align: center;
  margin-bottom: 30px;
}
.siceng{
  display: flex;
  justify-content: space-between;
  line-height: 15px;
  padding: 0 20px;
  
}
.siceng div{
  display: flex;
 
}
.siceng div h4{
  padding-right: 20px;
}
.wuceng{
  margin-top: 20px;
  display: flex;
  width: 100%;
  flex-flow: row wrap;
  justify-content: space-evenly;
}
.wuceng img{
  width: 30%;
  margin-bottom: 5px;
}
 .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }
  button{
    background: linear-gradient(266.23deg, #4960f7 0%, #6a97fa 100%);
    border-radius: 30px;
    border: 0;
    width: 100px;
    height: 40px;
    color: #fff;
  }
</style>
